import React, { PureComponent } from 'react';
import styled from 'styled-components';

const StatsContainer = styled.div`
  width: 100%;
  height: 100%;
  padding: 0.01rem; /* 极大减少内边距 */
  display: flex;
  flex-direction: column;
`;

const StatsTitle = styled.div`
  text-align: center;
  margin-bottom: 0.01rem; /* 极大减少标题底部边距 */
  flex-shrink: 0; /* 防止标题被压缩 */
  
  .title-text {
    font-size: 0.22rem; /* 大幅增加标题字体 */
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0.02rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  }
`;

const StatsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.025rem; /* 适当增加卡片间距以适应大字体 */
  flex: 1; /* 占满剩余空间 */
  align-items: stretch; /* 让卡片拉伸填满 */
  height: 100%; /* 确保占满高度 */
`;

const StatsCard = styled.div`
  background: linear-gradient(135deg, 
    rgba(0, 153, 255, 0.15) 0%, 
    rgba(0, 204, 255, 0.10) 100%);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px; /* 减小圆角 */
  padding: 0.05rem; /* 适当增加卡片内边距以适应大字体 */
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 居中对齐 */
  transition: all 0.3s ease;
  
  /* 发光边框效果 */
  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 8px;
    background: linear-gradient(135deg, 
      rgba(0, 255, 255, 0.4) 0%, 
      rgba(0, 153, 255, 0.2) 50%, 
      rgba(0, 255, 255, 0.4) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover::before {
    opacity: 1;
  }

  &:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
  }

  .stats-value {
    font-size: 0.35rem; /* 大幅增加数值字体 */
    font-weight: bold;
    color: #00ffff;
    text-shadow: 0 0 18px rgba(0, 255, 255, 0.8);
    line-height: 1; /* 减少行高 */
    margin-bottom: 0.02rem; /* 稍微增加下边距 */
    font-family: 'Arial', sans-serif;
  }

  .stats-label {
    font-size: 0.14rem; /* 大幅增加标签字体 */
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    letter-spacing: 0.01rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    line-height: 1; /* 减少行高 */
  }
`;

class UserBehaviorStats extends PureComponent {
  componentDidMount() {
    console.log('用户整体行为可视化组件已加载');
    console.log('用户行为数据:', this.props.data);
  }

  // 格式化大数字显示
  formatNumber = (num) => {
    try {
      if (num >= 10000) {
        return (num / 10000).toFixed(0) + '万';
      }
      return num.toLocaleString();
    } catch (error) {
      console.error('数字格式化失败:', error);
      return num;
    }
  }

  // 格式化小数显示
  formatDecimal = (num) => {
    try {
      return num.toFixed(4);
    } catch (error) {
      console.error('小数格式化失败:', error);
      return num;
    }
  }

  render() {
    const { data } = this.props;
    
    if (!data) {
      return (
        <StatsContainer>
          <div style={{ textAlign: 'center', color: '#ffffff' }}>
            加载用户行为数据中...
          </div>
        </StatsContainer>
      );
    }

    return (
      <StatsContainer>
        <StatsTitle>
          <div className="title-text">用户整体行为可视化</div>
        </StatsTitle>
        
        <StatsGrid>
          {/* 第一行 */}
          <StatsCard>
            <div className="stats-value">{this.formatNumber(data.pointBehavior)}</div>
            <div className="stats-label">点击行为</div>
          </StatsCard>
          
          <StatsCard>
            <div className="stats-value">{this.formatNumber(data.favoriteBehavior)}</div>
            <div className="stats-label">加购车行为</div>
          </StatsCard>
          
          <StatsCard>
            <div className="stats-value">{data.exclusiveCollection}</div>
            <div className="stats-label">独立IP购买量</div>
          </StatsCard>

          {/* 第二行 */}
          <StatsCard>
            <div className="stats-value">{this.formatDecimal(data.bounce)}</div>
            <div className="stats-label">跳出率</div>
          </StatsCard>
          
          <StatsCard>
            <div className="stats-value">{this.formatDecimal(data.retention)}</div>
            <div className="stats-label">留存率</div>
          </StatsCard>
          
          <StatsCard>
            <div className="stats-value">{data.avgPageViews}</div>
            <div className="stats-label">人均购买次数</div>
          </StatsCard>
        </StatsGrid>
      </StatsContainer>
    );
  }
}

export default UserBehaviorStats; 